<template>
    <div class="transactionDetail container_common1 flex_column">
        <header class="headers flex header_custom hei46 align_center" :style="{ paddingTop: safeTop+'px'}">
            <div class="left_icon absolute" :class="isNight=='night-theme'?'whiteIcons':'darkIcons'">
                <van-icon name="arrow-left" @click="back()" />
            </div>
            <div class="titleContent font1 c222">商家信息</div>
        </header>
        <div class="sections flex1" style="overflow:auto">
            <van-cell-group class="formBox" id="formBox" v-if="orderInfo.payType == 'BANKCARD'">
                <van-cell :title="orderInfo.storeDirection=='SELL'?'卖家姓名：':'买家姓名：'" :value="orderInfo.payMap.BANKCARD.name" />
                <van-cell title="银行卡号" :value="orderInfo.payMap.BANKCARD.bankCard" />
                <van-cell title="开户银行"" :value="orderInfo.payMap.BANKCARD.bankName" />
            </van-cell-group>
            <van-cell-group class="formBox" id="formBox" v-if="orderInfo.payType == 'WECHAT'">
                <van-cell :title="orderInfo.storeDirection=='SELL'?'卖家姓名：':'买家姓名：'" :value="orderInfo.payMap.WECHAT.name" />
                <div>
                    <img class="wechatImg" :src="'http://'+orderInfo.payMap.WECHAT.url" alt="">
                </div>
            </van-cell-group>
            <van-cell-group class="formBox" id="formBox" v-if="orderInfo.payType == 'ALIAY'">
                <van-cell :title="orderInfo.storeDirection=='SELL'?'卖家姓名：':'买家姓名：'" :value="orderInfo.payMap.ALIAY.name" />
                <div>
                    <img class="wechatImg" :src="'http://'+orderInfo.payMap.ALIAY.url" alt="">
                </div>
            </van-cell-group>
        </div>
        <div style="margin-bottom: 20px;">
            <van-button type="info" block class="mar_t_20 font1" @click="goPayment">付款成功</van-button>
        </div>
    </div>
</template>
    
    <script>
    import $ from "jquery";
    import {
        mapActions
    } from "vuex";
    import otcItem from "../../components/otcItem";
    import mores from "../../components/mores"; //更多弹框
    export default {
        components: {
            otcItem,
            mores
        },
        computed: {
            safeTop() {
                return this.$store.state.safeAreaTop;
            },
            isNight() {
                return this.$store.state.nowThemeInfo;
            },
            userId() {
                return this.$store.state.userId;
            }
        },
        mounted() {
            this.init();
    
            this.type = this.$route.query.type || "buy";
            this.priceOrderId = this.$route.query.orderPriceId || "";
            this.getOrderDetails();
            this.getOrderEndTime(); //获取订单结束时间
            if (this.isNight == "night-theme") {
                //黑夜模式
                // $('.assets').find(".lists").find('.van-cell:not(:last-child)::after').style.borderBottom = 'none';
            } else {
                //白天模式
            }
        },
        data() {
            return {
                isShow: false,
                payUrl: "",
    
                order: {
                    no: "165921617539189181"
                },
                type: "", //buy买入sell卖出
                explainModel: false, //交易说明弹框
                time: 0,
                priceOrderId: 0,
                orderInfo: {}, //訂單信息
                payTypeShow: false,
                payType: "",
                actions: [{
                    name: "微信"
                }, {
                    name: "支付宝"
                }, {
                    name: "银行卡"
                }],
                identity: 1, //1用户，2商户
                set: null
            };
        },
        methods: {
            ...mapActions([
                "setnavTitle",
                "setnavBarState",
                "settabBarState",
                "setbackRouter",
                "setnavBarArrow",
                "setnavBarBgColor",
                "setCurrency",
                "setStatusBar"
            ]),
            init() {
                this.setnavTitle("");
                this.setbackRouter("");
                this.setnavBarState(false);
                this.settabBarState(false);
                this.setnavBarArrow(true);
    
                this.setCurrency("");
            }, // 初始化页面
            //返回上一页
            back() {
                this.$router.go(-1);
            },
            getOrderDetails() {
                this.$post1("otc/order/orderDetails", {
                    priceOrderId: this.priceOrderId,
                    userId: this.$store.state.userId
                }).then(res => {
                    this.Toast.clear();
                    if (res && res.status == "SUCCEED" && res.result) {
                        this.orderInfo = res.result;
                    }
                });
            },
            goPayment() {
                this.$util.showLoading();
                var data = {
                    priceOrderId: this.priceOrderId,
                    userId: this.$store.state.userId
                };
                var url = "otc/order/paymentNew";
                this.$post1(url, data).then(res => {
                    this.Toast.clear();
                    if (res && res.status == "SUCCEED") {
                        this.Toast("订单交易成功");
                        this.back();
                    } else {
                        this.Toast(res.errorMessage);
                    }
                });
            },
        },
    
        destroyed() {
            if (this.set) {
                clearTimeout(this.set);
            }
            // this.setStatusBar("dark");
        }
    };
    </script>
    
    <style lang="scss">
    .wechatImg{
        width: 150px;
        height: 150px;
        margin:0 auto;
        margin-top: 60px;
    }
    .transactionDetail {
        .van-tabs__line {
            background-color: #3d77e0;
            height: 2px;
        }
    
        .van-tab--active {
            color: #3d77e0;
        }
    
        .submit {
            .van-button__text {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
                font-size: 16px;
            }
        }
    
        .formBox {
            .van-field__control {
                text-align: right;
            }
        }
    
        #formBox,
        #payType {
            .van-cell:not(:last-child)::after {
                border: none !important;
            }
    
            .van-cell {
                padding: 15px 0 0 0;
                font-size: 13px;
                font-weight: 500;
    
                &:last-child {
                    padding-bottom: 15px;
                }
            }
        }
    
        #payType {
            &.van-cell:not(:last-child)::after {
                border: none !important;
            }
    
            &.van-cell {
                padding: 15px 0;
                font-size: 15px;
                font-weight: 500;
            }
        }
    
        .van-button--info {
            color: #fff;
            background-color: #3d77e0;
            border: 1px solid transparent;
        }
    }
    </style><style lang="scss" scoped>
    @import "@/assets/scss/theme.scss";
    
    .transactionDetail {
        @include base-background();
    
        .header_custom {
            margin: 0 -15px;
    
            .left_icon {
                padding-left: 15px;
                height: 46px;
                display: flex;
                align-items: center;
            }
    
            .right_icon {
                height: 46px;
                display: flex;
                align-items: center;
                right: 0;
            }
    
            .titleContent {
                padding: 0 60px;
                width: 100%;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
            }
        }
    
        .sections {
            margin: 0 -15px;
            padding: 0 15px;
    
            .btnBox {}
    
            .btns {
                width: 160px;
                height: 45px;
                font-size: 15px;
                font-weight: bold;
                border-radius: 5px;
    
                &.cancels {
                    background: rgba(226, 237, 255, 1);
                    color: #3c78e1;
                    border-color: transparent;
                }
    
                &.defaultBg {
                    color: #fff;
                }
    
                &:last-child {
                    margin-left: 20px;
                }
            }
        }
    
        //规则弹框
        .ruleBox {
            @include base-background-second();
            width: 300px;
            border-radius: 5px;
            padding: 0 22px 30px;
    
            .title {
                text-align: center;
    
                font-size: 15px;
                padding: 15px 0;
            }
    
            .content {
    
                // max-height: 220px;
                // overflow-y: auto;
                .p {
                    font-size: 13px;
                    margin-top: 5px;
    
                    &:first-child {
                        margin-top: 0;
                    }
                }
            }
        }
    
        .check {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100vw;
            height: 100vh;
            left: 0;
            background: rgba(0, 0, 0, 00.9);
    
            .img {
                width: 90%;
                object-fit: contain;
            }
        }
    }
    </style>
    